<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="开标时间">
          <el-date-picker
            v-model="searchForm.date"
            class="ui-w260"
            unlink-panels
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="handleSearch()"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchForm.keyword"
            class="ui-w210"
            placeholder="项目名称/标段名称"
            @keyup.native.enter="handleSearch()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="60">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="bdname" label="标段名称" min-width="200" />
        <el-table-column prop="xmname" label="项目名称" min-width="200" />
        <el-table-column prop="sqtime" label="申请时间" min-width="200" />
        <el-table-column label="操作" align="center" header-align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="viewDate(scope.row)"> 项目详情 </el-button>
            <el-button type="text" size="default" @click="dowmload(scope.row)"> 下载数据 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <wpagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="projectListFn()"
      />
    </div>
    <el-dialog title="出证申请信息" :visible.sync="certificateinfo.show" width="60%">
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="项目名称" :span="2">{{certificateinfo.certificate.xmname}}</el-descriptions-item>
        <el-descriptions-item label="标段名称" :span="2">{{certificateinfo.certificate.bdname}}</el-descriptions-item>
        <el-descriptions-item label="申请人单位" :span="2">{{certificateinfo.certificate.sqrdw}}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{certificateinfo.certificate.sqr}}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{certificateinfo.certificate.sqtime}}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{certificateinfo.certificate.idcard}}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{certificateinfo.certificate.mobile}}</el-descriptions-item>
        <el-descriptions-item label="申请人事由" :span="2">{{certificateinfo.certificate.sqsy}}</el-descriptions-item>
        <el-descriptions-item label="出证数据">{{certificateinfo.certificate.czsj | czsjFilter}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import { findCertificatePage } from "../../../../../api/weeon/certificate/certificate";
  export default {
    filters: {
      czsjFilter(key) {
        if(key){
          let czsjs = key.split(",");
          let czsjlist = [];
          if(czsjs && czsjs.length > 0){
            for(var i=0;i<czsjs.length;i++){
              if(czsjs[i] == 'YWHJ'){
                czsjlist.push("业务环节数据");
              }
              if(czsjs[i] == 'YSP'){
                czsjlist.push("音视频数据");
              }
              if(czsjs[i] == 'STCZRZ'){
                czsjlist.push("系统操作日志数据");
              }
            }
          }
          return czsjlist.toString();
        }else{
          return "";
        }
      },
    },
    data() {
      // 这里存放数据
      return {
        certificateinfo: {show: false,certificate: {}},
        tableData: [],
        tableLoading: false,
        pageObj: {
          total: 0,
          currentPage: 0,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        searchForm: {
          keyword: "",
          date: [this.$moment(new Date()).format("yyyy-MM-DD"), this.$moment(new Date()).format("yyyy-MM-DD")]
        },
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.projectListFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    methods: {
      dowmload(row) {
        const downloadUrl =`${process.env.VUE_APP_API}/witness/weeon/buss/certificate/downloadData?certificateId=${row.id}`;
        const downloadRes = async () => {
          const response = await fetch(downloadUrl); // 内容转变成blob地址
          const blob = await response.blob(); // 创建隐藏的可下载链接
          const objectUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = objectUrl;
          a.download = `${row.bdname}.pdf`;
          a.click();
          a.remove();
        };
        downloadRes();
      },
      viewDate(row){
        this.certificateinfo.show = true;
        this.certificateinfo.certificate = row;
      },
      // 数据列表
      async projectListFn() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          let beginkbtime = "";
          let endkbtime = "";
          let params = {
            keyword: this.searchForm.keyword,
            beginkbtime: beginkbtime, // 起始时间
            endkbtime: endkbtime, //
            pageNo: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          const res = await findCertificatePage(params);
          this.tableLoading = false;
          if (res.stat === 1) {
            if (res.data.totalElements === 0 && this.pageObj.currentPage !== 0) {
              this.pageObj.currentPage = 0;
              this.$nextTick(() => {
                this.projectListFn();
              });
              return;
            }
            this.tableData = res.data.content;
            this.pageObj.total = res.data.totalElements;
          } else {
            this.$message({
              type: "error",
              message: res.msg || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
          this.tableLoading = false;
        }
      },
      handleSearch() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 0;
        this.projectListFn();
      },
    }
  }
</script>
<style lang="scss" scoped>
  .status-list {
    padding-top: 18px;
    span {
      padding-left: 20px;
      font-size: 12px;
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -2px;
      }
    }
    .completed::before {
      background-color: #56b502;
    }
    .inWitness::before {
      background-color: #1890ff;
    }
    .notStarted::before {
      background-color: #b2b2b2;
    }
  }
  ::v-deep.progress-list {
    .el-step {
      height: 26px;
      line-height: 26px;
      &::before {
        border-width: 13px;
      }
      &::after {
        border-width: 13px;
        right: -26px;
      }
      .cell {
        padding: 0 6px;
      }
      .el-step__title {
        line-height: 26px;
        text-align: center;
        i {
          color: #fc9306;
          // background-color: #fff;
        }
      }
    }
    // 已完成状态
    .status-completed {
      cursor: pointer;
      background: rgba(86, 181, 2, 0.2);
      &::after {
        border-left-color: rgba(86, 181, 2, 0.2);
      }
      .el-step__title {
        color: #56b502;
      }
    }
    .status-completed:hover {
      background: rgba(86, 181, 2);
      &::after {
        border-left-color: rgba(86, 181, 2);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 见证中状态
    .status-inWitness {
      cursor: pointer;
      background: rgba(24, 144, 255, 0.2);
      &::after {
        border-left-color: rgba(24, 144, 255, 0.2);
      }
      .el-step__title {
        color: #1890ff;
      }
    }
    .status-inWitness:hover {
      background: rgba(24, 144, 255);
      &::after {
        border-left-color: rgba(24, 144, 255);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 未开始状态
    .status-notStarted {
      background: rgba(153, 153, 153, 0.2);
      &::after {
        border-left-color: rgba(153, 153, 153, 0.2);
      }
    }
  }
</style>
